<template>
	<view class="appBox">
		<view class="list-input">
			<form @submit.prevent="submit">
				<view class="item">
					<view class="acea-row row-middle">
						<input v-model="model.type" type="text" class="texts" placeholder="输入申请类型" required />
					</view>
				</view>
				<view class="priceChange">
					<textarea v-model="model.reason" placeholder="请输入申请理由"></textarea>
				</view>
				<view class="cards">
					<text class="txt">资料图片</text>
					<view class="block">
						<view @click="uploadpic" class="card-pic">
							<image class="img-pic" src="/static/images/pic.png" mode="widthFix"></image>
						</view>
						<view class="card" v-for="(item,index) in uploads">
							<image class="img" :src="item"></image>
						</view>
					</view>
				</view>
			</form>
		</view>
		<button class="btn" @click="submit">提交申请</button>
	</view>
</template>

<script>
	import {
		getLoveSave
	} from "@/api/menu.js"
	export default {
		data() {
			return {
				model: {},
				upload_max: 5,
				uploads: [],
				uploadImages: [],
				exceeded_list: []
			}
		},
		components: {},
		mounted() {
			//this.getCode();
		},
		onLoad: function(options) {
			let that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.platform = res.platform;
				}
			});
			const {
				code,
				state,
				scope,
				back_url,
				appleShow
			} = options;
			that.options = options
			if (options.authKey) that.authKey = options.authKey
			if (options.appleShow) that.appleShow = options.appleShow
		},
		methods: {
			uploadpic: function() {
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						for (let i = 0; i < res.tempFiles.length; i++) {
							if (Math.ceil(res.tempFiles[i].size / 1024) < this.upload_max * 1024) {
								this.uploads.push(res.tempFiles[i].path)
								this.uploadImages.push(res.tempFiles[i].path)
							} else {
								this.exceeded_list.push(i === 0 ? 1 : i + 1);
								uni.showModal({
									title: '提示',
									content: `第${[...new Set(this.exceeded_list)].join(',')}张图片超出限制${this.upload_max}MB,已过滤`
								});
							}
						}
					},
					fail: (err) => {
						uni.showModal({
							content: JSON.stringify(err)
						});
					}
				});
			},
			async submit() {
				let that = this;
				that.model.annex = this.uploads.join(',')
				if (!that.model.type) return that.$util.Tips({
					title: '请填写申请类型'
				});
				if (!that.model.reason) return that.$util.Tips({
					title: '请填写申请理由'
				});
				if (!that.model.annex) return that.$util.Tips({
					title: '请上传资料'
				});
				uni.showLoading({
					title: '请稍等'
				});
				getLoveSave(that.model).then((res) => {
					that.$util.Tips({
						title: res
					});
					this.model = {}
					uni.hideLoading()
					uni.navigateBack()
				}).catch((res) => {
					that.$util.Tips({
						title: res
					});
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.priceChange textarea {
		border: 1px solid #eee;
		width: 100%;
		height: 313upx;
		margin-top: 22upx;
		border-radius: 10upx;
		color: #333;
		padding: 20upx;
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	@import url("../../../static/css/gstyle.scss");

	.appBox {
		background-color: #F5F6F7;
		height: 100%;
		padding: 0 33rpx 16rpx 33rpx;

		.btn {
			width: calc(100% - 66rpx);
			position: fixed;
			bottom: 64rpx;
		}

		.list-input {

			.item {
				border-bottom: 1px solid #F0F0F0;
				background: #fff;

				.row-middle {
					position: relative;
					padding: 0 25rpx;
					margin-top: 20rpx;

					.texts {
						flex: 1;
						font-size: 28rpx;
						height: 89rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					textarea {
						flex: 1;
						font-size: 28rpx;
						height: 313rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

				}
			}

			.cards {
				.txt {
					display: inline-block;
					font-size: 30rpx;
					color: #333333;
					margin: 22rpx 0 34rpx 0;
				}

				.block {
					display: flex;
					flex-wrap: wrap;
					align-items: center;


					.card,
					.card-pic {
						font-family: PingFang SC;
						font-size: 25rpx;
						color: #333333;
						width: 173rpx;
						height: 125rpx;
						background: white;
						margin: 0 26rpx 26rpx 0;

						.img {
							width: 173rpx;
							height: 125rpx;
						}
					}

					.card-pic {
						display: flex;
						justify-content: center;
						align-items: center;

						.img-pic {
							width: 63rpx;
							height: 49rpx;

						}
					}


				}
			}
		}
	}

	page {
		background-color: #fff !important;
	}
</style>